<template>
  <div>
    <div v-if="data.desc" class="box">
      <div>
        <img ref="big" :src="data.image" alt="">
      </div>
      <div v-if="data.name" class="rightBox">
        <el-row><strong>名称:</strong> {{ data.name }}</el-row>
        <el-row><strong>地址:</strong> {{ data.address }}</el-row>
        <el-row><strong>介绍:</strong> {{ data.desc }}</el-row>
      </div>
      <div v-else class="rightBox">
        <el-row><strong>标题:</strong>
          <!-- <el-tag v-for="{val,index} in data.tags" :key="index"> {{ index }}
          </el-tag> -->
          {{ data.title }}
        </el-row>
        <el-row><strong>地址:</strong> {{ data.address }}</el-row>
        <el-row><strong>介绍:</strong> {{ data.desc }}</el-row>
        <el-row><strong>价格:</strong> {{ data.price }}</el-row>
        <el-row><strong>展示:</strong>
          <el-row type="flex" justify="space-between" style="width:650px;padding-left:20px">
            <el-col v-for="url in data.photos" :key="url.id">
              <img
                :src="url.url"
                alt=""
                width="200px"
                height="200px"
                @click="changeImg(url.url)"
              >
            </el-col>
          </el-row>

        </el-row>
      </div>
    </div>
    <div v-if="!data.desc">
      <h1 class="bigtitle">{{ data.title }}</h1>
      <div style="width:100%;text-align:center" v-html="data.content">{{ data.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  created() {
    this.data = JSON.parse(localStorage.getItem('xiangqing'))
    console.log(123456, this.data)
    console.log(this.data.desc)
  },
  methods: {
    changeImg(url) {
      this.$refs.big.src = url
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  display: flex;
  padding: 50px  120px;
  .rightBox{
    margin:50px auto;
  }
}
.bigtitle{
  text-align: center;
}
</style>
